import type { AppProps } from "next/app";
import Link from "next/link";

const App = ({ Component, pageProps }: AppProps) => {
  const pagePath = [
    {
      path: "/",
      title: "Home",
    },
    {
      path: "/01_config-view",
      title: "配置 View",
    },
    {
      path: "/02_cpns-view",
      title: "组件 View",
    },
    {
      path: "/03_style-view",
      title: "样式 View",
    },
    {
      path: "/04_page-view",
      title: "页面 View",
    },
    {
      path: "/05_router-view",
      title: "路由 View",
    },
    {
      path: "/06_middleware-view",
      title: "中间件 View",
    },
    {
      path: "/07_layout-view",
      title: "布局 View",
    },
    {
      path: "/08_app-view",
      title: "应用程序 View",
    },
    {
      path: "/09_lifecycle-view",
      title: "生命周期 View",
    },
    {
      path: "/10_service-view",
      title: "服务器 View",
    },
    {
      path: "/11_render-view",
      title: "渲染 View",
    },
  ];

  return (
    <div>
      {pagePath.map((item) => (
        <Link href={item.path} key={item.path}>
          <button>{item.title}</button>
        </Link>
      ))}
      {/* 页面内容 */}
      <Component {...pageProps} />
    </div>
  );
};

App.displayName = "App";
export default App;
